<template lang="pug">
el-drawer.directory-hotspot(
  title='目录',
  :visible.sync='dialogVisible',
  append-to-body,
  :modal='false',
  :before-close='close',
  size='100%',
  :wrapperClosable='false',
  :direction='isPc ? "ltr" : "btt"',
  :class='isPc ? "" : "directory-hotspot-m"',
)
  .directory-hotspot-content
    el-tree(
      :data='info',
      node-key='id',
      default-expand-all,
      :expand-on-click-node='true',
      :props='defaultProps',
      @node-click='handleClick',
    )
      .custom.omit(slot-scope='{ node, data }') {{(data && data.children && data.children.length > 0) ? `${data.name}` : `【${typeObj[data.type]}】 ${data.name}`}}
</template>

<script>
import { isPc, downfile } from '@/utils'
import { pauseAllAudio } from '@/utils/audio'

export default {
  data() {
    this.isPc = isPc()
    return {
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      typeObj: {
        '1': '图片',
        '2': '视频',
        '3': '文档',
        '4': '图文',
      },
      info: [],
    }
  },
  mounted(){
    this.$vgo.on('directory:hotspot', item => {
      if (!(item && item.data)) return
      // console.log(item)
      this.info = item.data
      this.dialogVisible = true
    })
  },
  methods: {
    handleClick(data) {
      if (data && data.children && data.children.length > 0) {
        return false
      }
      // console.log(data)
      if (+data.type === 1) {
        // 图片
        $VM.$vgo.emit('iframe:image', data.full_file_url)
      } else if (+data.type === 2) {
        // 视频
        pauseAllAudio()
        $VM.$krp.controlsAllVideoin()
        $VM.$vgo.emit('iframe:video', data.full_file_url)
      } else if (+data.type === 3) {
        // 文档
        if (this.isPc) {
          window.open(data.full_file_url)
        } else {
          downfile(data.full_file_url)
        }
      } else if (+data.type === 4) {
        // 图文
        this.$store.dispatch('fetchGraphicData', data.mat_id)
      }
      this.close()
    },
    // 清除数据
    close() {
      this.dialogVisible = false
      this.info = []
    },
  }
}
</script>

<style lang="stylus" scoped>
.directory-hotspot
  width 300px
  left 0
  top 0
  .directory-hotspot-content
    width 100%
    height 100%
    overflow-x hidden
    overflow-y auto
    .custom
      max-width 90%

.directory-hotspot-m
  width 100vw !important
  height 100vh !important
  left 0px !important
  top auto !important

>>>.el-drawer
  outline none
  *
    outline none
  .el-drawer__header
    font-size 16px
    margin-bottom 0px
    padding 12px
    border-bottom 1px solid #ebeef5
    box-shadow 0 0 4px 0 rgba(200, 200, 200, 0.4)
  .el-drawer__body
    display flex
    flex-direction column
    height 0
  .el-tree-node__content
    height 36px

.drawer-footer
  border-top 1px solid #ebeef5
  box-shadow 0 0 4px 0 rgba(200, 200, 200, 0.4)
  padding 12px
</style>
